<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>实时</title>
    <style>
        .title {
            width: 20%;
            height: 200px;
            float: left;
            margin-top: 30px;
        }

        .title img {
            width: 80%;
            height: 150px;
            margin: 0 auto;
            display: block
        }

        .title p {
            text-align: center;
            color: #3c3131;
        }
    </style>
</head>

<body>
    {foreach name= "info" item="v"}

    <div class="title" id="abc{$vo['id']}" myid="{$vo['id']}" myimg="{$vo['img']}">
        <!--    <img src="../images/二氧化碳浓度.jpg">-->
        {if condition="$v['zhuangtai'] == '设备异常' || $v['zhuangtai'] == '数据异常'" }
        <img src="../images/kulian.png">
        {else /}
        <img src="<?php echo $v['img']?>">
        {/if}
        <p>{$v['sensor_cn_name']}传感器<br>
            数值：<span data-sensor="{$v['sensor_name']}">{$sensor_data[$v['sensor_name']]}</span>
            <!-- <span id="co2{$vo['id']}">{$vo['zhuangtai']}</span> -->
        </p>
    </div>
    {/foreach}
    <div style="clear: both"></div>
</body>
<script src="/static/home/js/jquery-3.4.1.min.js"></script>
<script>


    //    $(function () {
    //        $id="<?php //echo $info[0]['id']?>//";
    //        var min="<?php //echo $info[0]['range_min'] ?>//";
    //        var max="<?php //echo $info[0]['range_max']?>//";
    //        console.log(min);
    //        var data=  "<?php //echo $info[0]['data']?>//";
    //        if(data<min)
    //        {
    //            $("span","#abc"+$id).html("无");
    //            $("img","#abc"+$id).attr("src","../images/kulian.png")
    //        }
    //        else
    //        {
    //            var imgsrc= $("#abc"+$id).attr("myimg");
    //            $("span","#co2"+$id).html(data);
    //            $("img","#abc"+$id).attr("src",imgsrc);
    //        }
    //    });
    //    function getRndInteger(min, max) {
    //        return Math.floor(Math.random() * (max - min + 1) ) + min;
    //    }


    setInterval(function () {
        $.post("{:url('real_time')}", {}, function (res) {
            $("p span").each(function (i, obj) {
                let sensor = $(this).data('sensor');
                $(this).text(res[sensor]);
            });
        });
    }, 1000);
</script>

</html>